<template>
	<view class="order-detail">
		<g-navbar title="订单详情" backgroundColor="#365fff" fontColor="#ffffff" />
		<view class="main">
			<addressModule :masterOrderDetail="masterOrderDetail" v-if="masterOrderDetail&&masterOrderDetail.address" />
			<goodsDetail :masterOrderDetail="masterOrderDetail" />
			<view class="title" v-if="subOrderDetail.length">
				子单列表
			</view>
			<scroll-view scroll-y class="suborder-list" @scrolltolower="scrolltolower" v-if="subOrderDetail.length">
				<suborderItem v-for="item in subOrderDetail" :key="item.id" :subOrderDetail="item"
					:singlePrice="masterOrderDetail.single_price" />
				<uni-load-more :status="subOrderListPageInfo.loadingStatus"></uni-load-more>
			</scroll-view>
			<g-button @click="backHomePage" v-if="masterOrderDetail&&masterOrderDetail.order_num.substr(0,2) === 'HY'"
				btn_text="返回首页" :borderRadius="12" style="margin-top: 100rpx;" />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import addressModule from './components/address-module/addressModule.vue';
	import goodsDetail from './components/goods-detail/goodsDetail';
	import suborderItem from './components/suborder-item/suborderItem.vue';
	import { reactive, Ref, ref } from "vue";
	import { useStore } from 'vuex'
	import REST_URL from '@/http/http.restUrl';
	import { IMasterOrderDetail, ISubOrderDetail, IGetOrderDetailResult, ISubOrderListPageInfo } from './types';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { VERSION_TYPE } from '@/enum/version';


	const orderNum : Ref<string> = ref('');

	const masterOrderDetail : Ref<IMasterOrderDetail | null> = ref(null);

	const subOrderDetail : ISubOrderDetail[] = reactive([]);

	const subOrderListPageInfo : ISubOrderListPageInfo = reactive({
		pageNum: 1,
		pageSize: 10,
		loadingStatus: LOADING_STATUS.MORE
	})

	const store = useStore();

	onLoad((e) => {
		orderNum.value = e!.orderNum;
		getOrderDetail();
	})

	const getOrderDetail = async () : Promise<void> => {

		if (subOrderListPageInfo.loadingStatus !== LOADING_STATUS.MORE) return

		subOrderListPageInfo.loadingStatus = LOADING_STATUS.LOADING;

		const result : IGetOrderDetailResult = (await uni.http.POST(REST_URL.getOrderDetail, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			order_num: orderNum.value,
			page: subOrderListPageInfo.pageNum,
			page_num: subOrderListPageInfo.pageSize,
		})).data;

		subOrderListPageInfo.pageNum++;

		if (!masterOrderDetail.value) {
			masterOrderDetail.value = result.master_order;
		}
		subOrderDetail.push(...result.suborder.data);
		subOrderListPageInfo.loadingStatus = subOrderDetail.length >= result.suborder.total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;
	}

	const scrolltolower = () => {
		console.log('scrolltolower')
	}

	const backHomePage = () => {
		if (store.state.version == VERSION_TYPE.EXP_VERSION) {
			uni.router.route('/pages/home/home');
		} else {
			uni.router.route('/pages/statistics/statistics');
		}
	}
</script>

<style scoped lang="scss">
	@import "./orderDetail.scss";
</style>